<template>
	<view class="container">
		<!-- Top Navigation Icons -->
		<view class="nav-icons">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index">
				<view class="icon-wrapper" :class="item.color">
					<image :src="item.icon" class="nav-icon"></image>
				</view>
				<text class="nav-text">{{ item.text }}</text>
			</view>
		</view>

		<!-- Date Header -->
		<view class="date-header">
			<view class="date-info">
				<text class="date-text">{{ currentDate }} 第{{ weekNumber }}周 | {{ weekday }}</text>
				<text class="semester-text">{{ semesterInfo }}</text>
			</view>
			<view class="fullscreen-icon">
				<text class="iconfont icon-fullscreen">⤢</text>
			</view>
		</view>

		<!-- Schedule Section -->
		<view class="schedule-section">
			<view class="schedule-header">
				<view class="schedule-title">
					<text class="blue-bar"></text>
					<text>今日课程安排</text>
				</view>
				<view class="view-details">
					<text>查看课程详情</text>
					<text class="arrow">></text>
				</view>
			</view>

			<!-- Course Cards -->
			<view class="course-cards">
				<view class="course-card" v-for="(course, index) in courses" :key="index"
					@click="showCourseDetail(course)"
					:class="{ 'course-left': index === 0, 'course-right': index === 1 }">
					<view class="course-time">{{ course.timeSlot }}</view>
					<view class="course-name">{{ course.name }}</view>
					<view class="course-location">{{ course.location }}</view>
				</view>
			</view>

			<view class="motivation-text">
				<text>今天有{{ courses.length }}节课要上课，开启新的一天，加油！</text>
			</view>
		</view>

		<!-- Daily Plan Section -->
		<view class="daily-plan-section">
			<view class="plan-header">
				<text class="plan-title">日程计划</text>
				<view class="plan-management">
					<text>计划管理(1)</text>
					<text class="arrow">></text>
				</view>
			</view>

			<view class="plan-card">
				<view class="plan-badge">每日</view>
				<view class="plan-content">
					<view class="plan-item">
						<text class="plan-item-title">早睡提醒</text>
						<view class="plan-item-time">还有5小时</view>
					</view>
					<view class="plan-note">无备注</view>
				</view>
			</view>
		</view>

		<!-- Course Detail Modal -->
		<uni-popup ref="courseDetailPopup" type="center" background-color="transparent" @change="onPopupChange">
			<view class="mask" v-if="showMask" @click="closeCourseDetail"></view>
			<view class="course-detail-modal" :class="{'modal-active': popupVisible}">
				<view class="modal-header">
					<text class="modal-title">课程详情</text>
					<button class="modal-close" @click="closeCourseDetail">×</button>
				</view>
				<view class="modal-content" v-if="selectedCourse">
					<view class="detail-item">
						<text class="detail-label">课程名称</text>
						<text class="detail-value">{{ selectedCourse.name }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">上课时间</text>
						<text class="detail-value">{{ selectedCourse.timeSlot }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">上课地点</text>
						<text class="detail-value">{{ selectedCourse.location }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">任课教师</text>
						<text class="detail-value">{{ selectedCourse.teacher }}</text>
					</view>
					<view class="detail-description">
						<text class="detail-label">课程简介</text>
						<text class="detail-value description">{{ selectedCourse.description }}</text>
					</view>
					<view class="course-actions">
						<button class="action-button material">课程资料</button>
						<button class="action-button homework">作业提交</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: '03月04日',
				weekNumber: 6,
				weekday: '周二',
				semesterInfo: '2021-2022 第1学期',
				selectedCourse: null,
				popupVisible: false,
				showMask: false,
				navItems: [{
						icon: '../../static/grade.png',
						text: '成绩查询',
						color: 'icon-blue'
					},
					{
						icon: '../../static/grade.png',
						text: '智能笔记',
						color: 'icon-pink'
					},
					{
						icon: '../../static/grade.png',
						text: '跳蚤市集',
						color: 'icon-orange'
					},
					{
						icon: '../../static/grade.png',
						text: '校卡充值',
						color: 'icon-teal'
					},
					{
						icon: '../../static/grade.png',
						text: '超级社团',
						color: 'icon-blue-light'
					}
				],
				courses: [{
						timeSlot: '第1-2节',
						name: '微信小程序开发',
						location: '空港校区 公教楼405',
						teacher: '李明',
						description: '本课程介绍微信小程序开发的基础知识和实践技能，包括界面设计、数据绑定、API调用等内容。通过实际项目练习，学生将掌握完整的小程序开发流程和技巧。'
					},
					{
						timeSlot: '第3-4节',
						name: '微信小程序开发',
						location: '空港校区 公教楼405',
						teacher: '李明',
						description: '本课程介绍微信小程序开发的基础知识和实践技能，包括界面设计、数据绑定、API调用等内容。通过实际项目练习，学生将掌握完整的小程序开发流程和技巧。'
					}
				]
			};
		},
		methods: {
			showCourseDetail(course) {
				this.selectedCourse = course;
				this.$refs.courseDetailPopup.open();
				setTimeout(() => {
					this.showMask = true;
					this.popupVisible = true;
				}, 50);
			},
			closeCourseDetail() {
				this.popupVisible = false;
				setTimeout(() => {
					this.showMask = false;
					this.$refs.courseDetailPopup.close();
				}, 300);
			},
			onPopupChange(e) {
				if (!e.show) {
					this.popupVisible = false;
					this.showMask = false;
				}
			}
		}
	};
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f8f9fd;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	/* Nav Icons Styles */
	.nav-icons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 12rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.icon-blue {
		background: linear-gradient(135deg, #4a89dc, #5d9cec);
	}

	.icon-pink {
		background: linear-gradient(135deg, #ec87c0, #ff9eb6);
	}

	.icon-orange {
		background: linear-gradient(135deg, #ffce54, #ffa64d);
	}

	.icon-teal {
		background: linear-gradient(135deg, #48cfad, #4fc1e9);
	}

	.icon-blue-light {
		background: linear-gradient(135deg, #4fc1e9, #5d9cec);
	}

	.nav-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #555;
	}

	/* Date Header Styles */
	.date-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.date-text {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 6rpx;
	}

	.semester-text {
		font-size: 24rpx;
		color: #777;
	}

	.fullscreen-icon {
		font-size: 40rpx;
		color: #555;
		background-color: rgba(240, 240, 240, 0.8);
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Schedule Section Styles */
	.schedule-section {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
	}

	.schedule-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.schedule-title {
		display: flex;
		align-items: center;
	}

	.blue-bar {
		width: 6rpx;
		height: 30rpx;
		background-color: #4a89dc;
		margin-right: 16rpx;
		display: inline-block;
		border-radius: 3rpx;
	}

	.view-details {
		font-size: 26rpx;
		color: #8c9bab;
		display: flex;
		align-items: center;
	}

	.arrow {
		margin-left: 5rpx;
	}

	/* Course Cards Styles */
	.course-cards {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.course-card {
		width: 48%;
		border-radius: 20rpx;
		padding: 25rpx;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.course-card:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.course-left {
		background: linear-gradient(145deg, #f2f7ff, #eef4fe);
		border: 1px solid rgba(74, 137, 220, 0.1);
	}

	.course-right {
		background: linear-gradient(145deg, #f0f9ff, #eef7fe);
		border: 1px solid rgba(74, 187, 220, 0.1);
	}

	.course-time {
		font-size: 26rpx;
		color: #6e84a3;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.course-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #384a66;
		margin-bottom: 16rpx;
	}

	.course-location {
		font-size: 24rpx;
		color: #8c9bab;
	}

	.motivation-text {
		font-size: 26rpx;
		color: #6e84a3;
		text-align: center;
		margin-top: 30rpx;
	}

	/* Daily Plan Section Styles */
	.daily-plan-section {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
	}

	.plan-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.plan-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #384a66;
	}

	.plan-management {
		font-size: 26rpx;
		color: #8c9bab;
		display: flex;
		align-items: center;
	}

	.plan-card {
		background: linear-gradient(145deg, #f2f7ff, #eef4fe);
		border-radius: 20rpx;
		padding: 25rpx;
		display: flex;
		border: 1px solid rgba(74, 137, 220, 0.1);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.plan-badge {
		background-color: #4a89dc;
		color: #fff;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		height: fit-content;
		margin-right: 24rpx;
		font-weight: 500;
	}

	.plan-content {
		flex: 1;
	}

	.plan-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.plan-item-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #384a66;
	}

	.plan-item-time {
		font-size: 24rpx;
		color: #6e84a3;
		background-color: rgba(255, 255, 255, 0.7);
		padding: 6rpx 20rpx;
		border-radius: 18rpx;
		border: 1px solid rgba(142, 156, 173, 0.2);
	}

	.plan-note {
		font-size: 24rpx;
		color: #8c9bab;
	}

	/* Course Detail Modal Styles */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 999;
		opacity: 0;
		animation: fadeIn 0.3s forwards;
	}

	@keyframes fadeIn {
		to {
			opacity: 1;
		}
	}

	.course-detail-modal {
		background-color: #fff;
		border-radius: 30rpx;
		width: 85vw;
		padding: 40rpx 30rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
		transform: translateY(40rpx);
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		position: relative;
		z-index: 1000;
	}

	.modal-active {
		transform: translateY(0);
		opacity: 1;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
		padding-bottom: 25rpx;
	}

	.modal-header::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -30rpx;
		right: -30rpx;
		height: 1px;
		background: linear-gradient(to right, rgba(230, 236, 245, 0), rgba(230, 236, 245, 1) 50%, rgba(230, 236, 245, 0));
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #384a66;
	}

	.modal-close {
		font-size: 44rpx;
		color: #8c9bab;
		background: none;
		border: none;
		padding: 0;
		width: 60rpx;
		height: 60rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.modal-close:active {
		background-color: #f0f3f8;
	}

	.modal-content {
		padding: 0 10rpx;
	}

	.detail-item {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.detail-description {
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.detail-label {
		font-size: 28rpx;
		color: #8c9bab;
		margin-bottom: 10rpx;
	}

	.detail-value {
		font-size: 30rpx;
		color: #384a66;
		font-weight: 500;
	}

	.detail-value.description {
		font-weight: normal;
		line-height: 1.6;
	}

	.course-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.action-button {
		flex: 1;
		padding: 20rpx 0;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.2s ease;
		border: none;
	}

	.action-button.material {
		background-color: #f2f7ff;
		color: #4a89dc;
		margin-right: 20rpx;
	}

	.action-button.homework {
		background-color: #4a89dc;
		color: #fff;
	}

	.action-button:active {
		transform: translateY(2rpx);
		opacity: 0.9;
	}
</style>